<template>
  <div class="c">
    <div class="images">
      <div v-for="img in images" :key="img.key" class="item">
        <p>{{img.name}}</p>
        <div class="bd">
          <img :src="img.src?img.src:img.placeholder" alt="" @click="preview(img.src)">
          <p style="line-height: 20px;" v-if="!img.src">示例</p>
        </div>
        <v-uploader class="uploader" v-model="img.src" @input="imageChange"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'

  import vUploader from '@/components/uploader/index.vue'

  @Component({
    components: {
      vUploader
    }
  })
  export default class UnitAuthImages extends Vue {
    @Prop() images
    businessLicensePhoto = ''
    idCard = ''
    managerPhotoFront = ''

    imageChange () {
      this.$emit('input', this.images)
      if (this.images[0].src !== this.businessLicensePhoto) {
        this.businessLicensePhoto = this.images[0].src
        this.$emit('ocr', this.images[0].src)
      }
      // console.log(this.images.length)
      if(this.images.length > 1){
        if (this.images[1].src !== this.idCard) {
          this.idCard = this.images[1].src
          this.$emit('idCardOcr', this.images[1].src)
        }
      }
      if (this.images[0].key === 'managerPhotoFront'){
        if (this.images[0].src !== this.managerPhotoFront) {
          this.managerPhotoFront = this.images[0].src
          this.$emit('managerPhotoFrontOcr', this.images[0].src)
        }
      }
      if (this.images[0].key === 'managerPhotoFront'){
        if (this.images[0].src !== this.managerPhotoFront) {
          this.managerPhotoFront = this.images[0].src
          this.$emit('managerPhotoFrontOcr', this.images[0].src)
        }
      }
    }

    preview (src) {
      if (src === '') return
      window.open(src)
    }
  }
</script>
<style lang="less" scoped>
  .c {
    margin-left: -220px;
  }

  .images {
    display: flex;
    justify-content: space-around;
    .item {

      text-align: center;
      .bd {
        border: 1px solid #ddd;
        padding: 10px 0;
        width: 210px;
        height: 280px;
        line-height: 240px;
      }

      img {
        width: 150px;
        vertical-align: middle;
      }
    }
    .uploader {
      margin-top: 16px;
    }

    p {
      font-size: 16px;
      color: #666666;
      text-align: center;
    }
  }

</style>
